<template>
	<div ref="cardItem" v-resize="onSize" style="height: 100%;">
		<el-carousel :height="`${cardHeight}px`" :autoplay="true" indicator-position="none">
			<el-carousel-item v-for="(item, index) in chartData" :key="index">
				<div class="carousel-item-head flex-center">
					<span class="item-gap flex-center carousel-item-title">{{ index + 1 }}</span>
					<span>{{ item.productName }}</span>
				</div>
				<div style="height: calc(100% - 22px);">
					<jk-ranking
						unit="KG"
						type="danger"
						:param-data="item.machineList"
						val-key="shiftQty"
						label-key="machineName"
					></jk-ranking>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>

    import domResizeMixin from '../../../../../mixins/dom-resize';
    import { reportProductionHomeDataMachineYieldTop } from '../../../../../api/production/kanBan';
    import jkRanking from '../jk-ranking/index';
    export default {
        name: 'MachineProductionRanking', // 机台产量排行
        mixins: [domResizeMixin],
        components: {
            jkRanking
        },
        props: {
            paramData: {
                type: Object,
                default() {
                    return {};
                }
            },
            refreshData: {
                type: [Number, String],
                default: ''
            },
            workshopId: {
                type: Number,
                default: null
            },
            processCode: {
                type: String,
                default: 'XS'
            }
        },
        data() {
            return {
                chartData: [],
                cardHeight: 0,
                productList: [],
                example: null,
                borderColor: '#c5c8ce'
            };
        },
        methods: {
            onSize() {
                this.cardHeight = this.$refs.cardItem.clientHeight;
            },
            // 判断数据是否变化
            dataIsChange(newVal = [], oldVal = []) {
                if (newVal.length && oldVal.length) {
                    const len = newVal.length;
                    let childLen = 0;
                    let isDiff = false;
                    for (let i = 0; i <= len - 1; i++) {
                        if (newVal[i].productName !== oldVal[i].productName) {
                            isDiff = true;
                        }
                        if (newVal[i].machineList.length !== oldVal[i].machineList.length) {
                            isDiff = true;
                        } else {
                            childLen = newVal[i].machineList.length;
                            for (let k = 0; k <= childLen - 1; k++) {
                                if (newVal[i].machineList[k].shiftQty !== oldVal[i].machineList[k].shiftQty) {
                                    isDiff = true;
                                }
                            }
                        }
                    }
                    if (isDiff) {
                        this.chartData = JSON.parse(JSON.stringify(newVal));
                    }
                } else {
                    this.chartData = JSON.parse(JSON.stringify(newVal));
                }
            },
            getDataRequest() {
                if (!this.workshopId) return false;
                // console.log('机台产量排行')
                return reportProductionHomeDataMachineYieldTop({
                    workshopId: this.workshopId,
                    processCode: this.processCode
                }).then(res => {
                    if (res.data.status === 200) {
                        this.productList = res.data.res;
                    }
                });
            }
        },
        mounted() {
            this.cardHeight = this.$refs.cardItem.clientHeight;
        },
        watch: {
            refreshData: {
                handler() {
                    this.getDataRequest();
                },
                deep: true,
                immediate: true
            },
            productList: {
                handler(newVal, oldVal) {
                    this.dataIsChange(newVal || [], oldVal || []);
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss">
    .carousel-item-head {
        height: 22px;font-size: 13px;color: #2b85e4;
        width: 100%;font-weight: 700;
        .carousel-item-title {
            width: 18px;
            height: 18px;
            border: solid 1px #2b85e4;
            border-radius: 50%;
            font-size: 12px;
        }
    }
</style>
